<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义关键帧动画 */
        @keyframes move{
    from{
        transform: translate(0,0);
    }
    25%{
        transform: translateX(-50px);
    }
    50%{
        transform: translateX(0px);
    }
    75%{
        transform: translateX(49px);
    }
    to{
        transform:translate(0px) ;
    }
}
  /* 大盒子 */
.box{
    display: flex;
   
    align-items: center;
    margin: auto;
    width: 500px;
    height: 500px;
    border: 100px solid #fff;
    background-color: #fff;
     
    
}

.boc{
    width: 102px;
    height: 100px;
    background-color: #fff;
    z-index: 3;
    /* animation: run 1s steps(10) 0s infinite; */
    position: relative;
    right: -200px;
}
.boxx{
    width: 102px;
    height: 100px;
    background-color: #fff;
    z-index: 3;
    /* animation: run 1s steps(10) 0s infinite; */
    position: relative;
    right: -150px;
}
/* 三个颜色盒子 */
.boxa{
    /* position: absolute; */
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: aqua;
    animation: move 5s ease 0s infinite alternate;
   

}
.boxb{
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: brown;
    animation: move 5s ease 0s infinite alternate;
    
}
.boxc{
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: blue;
    animation: move 5s ease 0s infinite alternate;
}
  </style>
</head>
<body>
    <div class="box">
        <div class="boxx"></div>
        <div class="boc"></div>
        <div class="boxa">aqua</div>
        <div class="boxb">brown</div>
        <div class="boxc">blue</div>
    
    </div>
</body>
</html>